<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
      <el-table
        ref="table"
        v-loading="loading"
        :data="receivableList"
        height="520"
        border
        :highlight-current-row="true"
        show-summary
        :summary-method="getSummaries"
        @row-click="clickRow"
      >
<!--        <el-table-column type="selection" width="55" align="center" />-->
        <el-table-column align="center" label="序号" width="50px" fixed="left">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="单据号" align="center" prop="costNo" fixed="left" width="150"/>
        <el-table-column label="房屋名称" align="center" width="180">
          <template slot-scope="scope">
            <span>{{scope.row.roomName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="客户" align="center" prop="ownerName" width="100"/>
        <el-table-column label="收费标准" align="center" prop="normNames" width="120" />
        <el-table-column label="计费行度" align="center" prop="chargedLine" width="120" />
        <el-table-column label="费用期间" align="center" prop="fiscalPeriod" width="100" />
        <el-table-column label="计费开始日期" align="center" prop="beginTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计费结束日期" align="center" prop="finishTime" width="120">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="使用面积" align="center" prop="roomArea" width="100" />
        <el-table-column label="建筑面积" align="center" prop="buildArea" width="100" />
        <el-table-column label="单价" align="center" prop="prices" width="100" />
        <!--<el-table-column label="金额" align="center" prop="moneys"  width="120"/>-->
        <el-table-column label="应收金额" align="center" prop="receivableMoney"  width="100"/>
        <!--<el-table-column label="实收金额" align="center" prop="paidMoney"  width="100"/>-->
        <el-table-column label="已收金额" align="center" prop="haveMoney"  width="100"/>
        <el-table-column label="冲抵金额" align="center" prop="amountAmount"  width="100"/>
        <el-table-column label="优惠政策" align="center" prop="favouredPolicyName"  width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.favouredPolicyName">{{scope.row.favouredPolicyName}}</span>
            <span v-else>{{policyFormat(scope.row.preferentialId)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="优惠金额" align="center" prop="specialMoney"  width="100"/>
        <!--<el-table-column label="优惠后金额" align="center" prop="queenMoney"  width="100"/>-->
<!--        <el-table-column label="欠费金额" align="center" prop="amountOwed"  width="100"/>-->
        <el-table-column label="欠费金额" align="center" prop="paidMoney"  width="100"/>
        <el-table-column label="状态" align="center" prop="status"  width="100" :formatter="statusFormat" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { listRuleCost } from "@/api/payfee/ruleCost";
import { listItem } from "@/api/payfee/item";
import { listProject} from "@/api/payfee/project";
import {tableList} from "@/utils/mixins/tableList";
export default {
  mixins: [tableList],
  name: "ReceivableList",
  data() {
    return {
      open:false,
      title:'',
      // 遮罩层
      loading: false,
      //应收费用列表
      receivableList:[],
      //收费项目字典
      itemOptions:[],
      //收费类型字典
      projectOptions:[],
      queryParams:{
        beginTime:null,
        finishTime:null,
        roomId:null,
        projectId:null,
        chargeId:null,
        status:'10001',
        receiptDetailId:null
      },
      listFavouredPolicyOptions:[],
      summaryColumn: [
        'receivableMoney','haveMoney','amountAmount','specialMoney','amountOwed','paidMoney'
      ]
    };
  },
  created() {
    this.getDicts("charge_status").then(response => {
      this.statusOptions = response.data;
    });
    listItem().then(res=>{
      this.itemOptions = res.rows;
    })
    listProject().then(res=>{
      this.projectOptions = res.rows;
    })
  },
  methods: {
    show(options){
      this.listFavouredPolicyOptions = options.listFavouredPolicyOptions
      this.title = `${this.projectFormat(options.bean)}-${this.itemFormat(options.bean)}`
      if(options.type && 'view' === options.type){
        this.queryParams.status = ''
        this.queryParams.receiptDetailId = options.bean.receiptDetailId||"-1"
        this.getList();
      }else{
        if(options.bean.ruleCostList && options.bean.ruleCostList.length>0){
          this.receivableList = options.bean.ruleCostList
        }else{
          this.queryParams.ruleCostIds = options.bean.ruleCostIds||"-1"
          this.getList();
        }
      }
      this.open = true
    },
    // 优惠政策字典
    policyFormat(favouredPolicyId) {
      let index = this.listFavouredPolicyOptions.findIndex(x=>x.favouredPolicyId == favouredPolicyId);
      if(index != -1){
        return this.listFavouredPolicyOptions[index].favouredPolicyName
      }
      return '';
    },
    /** 查询常规费用单列表 */
    getList() {
      this.loading = true;
      listRuleCost(this.queryParams).then(response => {
        this.receivableList = response.rows;
        this.loading = false;
      });
    },
    // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 收费项目字典翻译
    itemFormat(row, column) {
      let index = this.itemOptions.findIndex(x=>x.chargeId == row.chargeId);
      if(index != -1){
        return this.itemOptions[index].chargeName
      }
      return '';
    },
    // 收费类型字典翻译
    projectFormat(row, column) {
      let index = this.projectOptions.findIndex(x=>x.projectId == row.projectId);
      if(index != -1){
        return this.projectOptions[index].projectType
      }
      return '';
    },
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    }
  }
};
</script>
